<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
</head>

<body>
    <!-- 
        v-model
            1.作用：给表单元素使用，双向数据绑定 -> 可以快速获取或设置表单元素内容
                ① 数据变化 -> 试图自动更新
                ② 试图变化 -> 数据自动更新
            2.语法：v-model = '变量'
    -->
    <div id="app">
        用户: <input type="text" v-model="username"> <br><br>
        密码: <input type="text" v-model="password"> <br><br>
        <button @click="login()">登录</button>
        <button @click="reset()">重置</button>
    </div>

    <script src="./script/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: ''
            },
            methods: {
                login() {
                    console.log(this.username, this.password);
                },
                reset() {
                    this.username = '';
                    this.password = '';
                }
            },
        })
    </script>
</body>

</html>